<template>
  <div class="weatherBox">
    <div class="todayWeather">
      <span>今天</span>
      <img :src="todayWeather.url" />
      <span class="weather">{{ todayWeather.wea }}</span>
      <span>{{ todayWeather.win_speed }}</span>
      <span>{{ todayWeather.tem2 }} ~ {{ todayWeather.tem1 }}</span>
    </div>
    <div class="listWrap">
      <div class="weatherItem" v-for="(item, index) in weatherList" :key="index">
        <p>{{ item.date }}</p>
        <p class="imgBox">
          <img :src="item.url" />
          <!-- <img v-else src="@/assets/images/dustNoise/weatherIcon/yu.png" /> -->
        </p>
        <div class="weather">{{ item.wea }}</div>
        <div class="temp">{{ item.tem2 }} ~ {{ item.tem1 }}</div>
        <p>{{ item.win_speed }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { TOKEN_PROD, TOKEN_DEV, VUE_BASE_API } from '@/utils/publicdata'
const axios = require('axios')
const weatherIcon = [
  {
    Image: new URL('@/assets/images/weather/bingbao.png', import.meta.url).href
  },
  {
    Image: new URL('@/assets/images/weather/qing.png', import.meta.url).href
  },
  {
    Image: new URL('@/assets/images/weather/shachen.png', import.meta.url).href
  },
  {
    Image: new URL('@/assets/images/weather/weather4.png', import.meta.url).href
  },
  {
    Image: new URL('@/assets/images/weather/weather5.png', import.meta.url).href
  },
  {
    Image: new URL('@/assets/images/weather/wu.png', import.meta.url).href
  },
  {
    Image: new URL('@/assets/images/weather/xue.png', import.meta.url).href
  },
  {
    Image: new URL('@/assets/images/weather/yin.png', import.meta.url).href
  },
  {
    Image: new URL('@/assets/images/weather/yu.png', import.meta.url).href
  },
  {
    Image: new URL('@/assets/images/weather/yu1.png', import.meta.url).href
  },
  {
    Image: new URL('@/assets/images/weather/yun.png', import.meta.url).href
  },
  {
    Image: new URL('@/assets/images/weather/yun1.png', import.meta.url).href
  }
]
export default {
  data() {
    return {
      weatherIcon,
      list: [
        {
          date: new Date().toISOString().split('T')[0],
          tem_day: '16',
          tem2: '9',
          tem1: '16',
          city: '木垒',
          tem_night: '9',
          cityid: '101130408',
          wea: '晴',
          update_time: '2024-09-12 16:43:53',
          wea_img: 'qing',
          win_speed: '<3级',
          win: '西北风',
          day: '2024-09-12'
        },
        {
          date: new Date().toISOString().split('T')[0],
          tem_day: '16',
          tem2: '9',
          tem1: '16',
          city: '木垒',
          tem_night: '9',
          cityid: '101130408',
          wea: '晴',
          update_time: '2024-09-12 16:43:53',
          wea_img: 'qing',
          win_speed: '<3级',
          win: '西北风',
          day: '2024-09-12'
        },
        {
          date: new Date(new Date().getTime() + 24 * 60 * 60 * 1000).toISOString().split('T')[0],
          tem_day: '22',
          tem2: '9',
          tem1: '22',
          city: '木垒',
          tem_night: '9',
          cityid: '101130408',
          wea: '晴',
          update_time: '2024-09-12 16:43:53',
          wea_img: 'qing',
          win_speed: '<2级',
          win: '东北风',
          day: '2024-09-13'
        },
        {
          date: new Date(new Date().getTime() + 2 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
          tem_day: '15',
          tem2: '5',
          tem1: '15',
          city: '木垒',
          tem_night: '6',
          cityid: '101130408',
          wea: '小雨',
          update_time: '2024-09-12 16:43:53',
          wea_img: 'yu',
          win_speed: '<3级',
          win: '东南风',
          day: '2024-09-14'
        }
      ],
      todayWeather: {},
      weatherList: []
    }
  },
  created() {
    this.getData()
    // this.list.forEach((element, index) => {
    //   // console.log('天气数据',this.weatherIcon);
    //   const weatherImg = this.weatherIcon.find(icon =>
    //     icon.Image.includes(element.wea_img)
    //   );
    //   if (weatherImg) {
    //     const imageUrl = weatherImg.Image;
    //     // 将拼接好的URL赋值给element.url字段
    //     element.url = imageUrl;
    //   }
    //   if (index === 0) {
    //     this.todayWeather = element;
    //   } else {
    //     this.weatherList.push(element);
    //   }
    // });
    // this.weatherList.splice(3, 3);
  },
  methods: {
    // 查询数据
    getData() {
      // 定义请求的URL
      const url = `${VUE_BASE_API}/xmgl/airQualityAnalysis/getWeatherData`
      // 定义请求头
      const headers = {
        Authorization: TOKEN_PROD,
        'Content-Type': 'application/json'
      }
      axios
        .post(
          url,
          {
            areaId: '652328'
          },
          { headers }
        )
        .then(response => {
          // 从响应中提取total的值
          // console.log("查询数据", response.data);
          // console.log("查询数据", response.data.code);
          if (response.data.code == '200') {
            console.info('查询数据', response.data)
            let json = JSON.parse(response.data.result)
            let list = json
            list.forEach((element, index) => {
              const weatherImg = this.weatherIcon.find(icon => icon.Image.includes(element.wea_img))
              if (weatherImg) {
                const imageUrl = weatherImg.Image
                // 将拼接好的URL赋值给element.url字段
                element.url = imageUrl
              }
              if (index === 0) {
                this.todayWeather = element
              } else {
                this.weatherList.push(element)
              }
            })
            this.weatherList.splice(3, 3)
          }
        })
        .catch(error => {
          console.error('Error:', error.message)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.weatherBox {
  width: 100%;
  height: 100%;
  //   display: flex;
  font-size: 14px;
  color: #fff;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 550;
  .todayWeather {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 550;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    img {
      width: 70px;
      height: 70px;
    }
  }
  .listWrap {
    display: flex;
    height: 70%;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 550;
    .weatherItem {
      height: 100%;
      width: 33%;
      border-right: 1px dashed #164187;
      text-align: center;

      &:last-child {
        border-right: none;
      }
      .imgBox {
        width: 100%;
        height: 40%;

        img {
          width: 62px;
          height: 62px;
          margin-top: -2%;
        }
      }

      .weather {
        margin-top: -20%;
      }

      .temp {
        margin-top: 10%;
      }
    }
  }
}
</style>
